<div class="main">
    <mat-card data-cy="volume-info" *ngFor="let volume of volumes">
        <mat-card-header class="colored-title">
            <mat-card-title>{{volume.name}}</mat-card-title>
            <mat-card-subtitle>Volume</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <table class="aligned">
                <tr *ngIf="volume.size">
                    <td>Size:</td>
                    <td><code>{{volume.size}}</code></td>
                </tr>
                <tr>
                    <td>Volume is Ephemeral:</td>
                    <td><code>{{volume.ephemeral ? "Yes" : "No"}}</code></td>
                </tr>
            </table>
        </mat-card-content>

        <mat-card-actions>
            <button mat-button color="warn" (click)="delete(volume.name)">Delete</button>
            <button data-cy="volume-edit" mat-button (click)="edit(volume)">Edit</button>
        </mat-card-actions>

    </mat-card>

    <app-volume
        *ngIf="forceDisplayForm || volumes == undefined || volumes.length == 0"
        [cancelable]="forceDisplayForm"
        (canceled)="undisplayAddForm()"
        (created)="onCreated($event)"
        [volume]="editingVolume"
        (saved)="onSaved($event)"
    ></app-volume>
</div>

<ng-container *ngIf="!forceDisplayForm && volumes != undefined && volumes.length > 0">
    <button class="fab" mat-fab color="primary" (click)="displayAddForm()">
        <mat-icon class="material-icons-outlined">add</mat-icon>
    </button>
</ng-container>
